<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 添加按钮 -->
      <div class="clearfix">
        <el-button class="addBtn" style="float: right; padding: 3px 0" type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
      <!-- 表单 -->
      <el-form size="small" label-width='100px' :model="form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select @change="changeSubject" v-model="form.subjectID">
                <el-option
                v-for="item in SubjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID">
                <el-option
                v-for="item in directoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" >
              <el-select v-model="form.tags">
                <el-option
                v-for="item in tagslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType">
                <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty">
                <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction">
                <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID">
                <el-option
                v-for="item in userInfoList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select style="width:90px" @change="cityChange" v-model="form.province">
                <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :label="item"
                :value="item"
                >
                </el-option>
              </el-select>
              <el-select style="width:90px" v-model="form.city">
              <el-option
              v-for="(item, index) in smallcity"
              :key="index"
              :label="item"
              :value="item"
              ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!-- 提示数据信息 -->
      <el-alert
        type="info"
        show-icon
        :closable='false'
        >
        一共有{{total}}条数据
      </el-alert>
      <!-- 表格 -->
      <el-table
       :data="showlist"
       style="width: 100%">
        <el-table-column
          label="试题编号"
          width="100">
          <template v-slot={row}>
            <span>{{row.number}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="学科"
          width="100">
          <template v-slot={row}>
            <span>{{row.subject}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="目录"
          width="100">
          <template v-slot={row}>
            <span>{{row.catalog}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="题型"
          width="100">
          <template v-slot={row}>
            <span>{{questionTypeList.find(item=>item.value === +row.questionType).label}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="">
          <template v-slot={row}>
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="210">
          <template v-slot={row}>
            <span>{{row.addDate | parseTimeByString()}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          width="100">
          <template v-slot={row}>
            <span>{{difficultyList.find(item=>item.value=== +row.difficulty).label}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          width="100">
          <template v-slot={row}>
            <span>{{row.creator}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot={row}>
            <el-button icon="el-icon-search" circle @click="preview(row)"></el-button>
            <el-button type="primary" icon="el-icon-edit" circle @click="edit(row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="del(row.id)"></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle @click="examine(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <!-- <span class="demonstration"></span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="null"
          :page-size="null"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          background
          :page-sizes="[5, 10, 20, 50]">
        </el-pagination>
      </div>
      <Dialog ref="edit" :currentid="currentid"></Dialog>
    </el-card>
  </div>
</template>

<style>

</style>

<script>
import { list, remove, choiceAdd } from '../../api/hmmm/questions'
import { simple as subjects } from '../../api/hmmm/subjects'
import { simple as directorys } from '../../api/hmmm/directorys'
import { simple as tagslist } from '../../api/hmmm/tags'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { simple } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'
import Dialog from '../components/questions-preview.vue'
// import { Message } from 'element-ui'
export default {
  components: {
    Dialog
  },
  data () {
    return {
      currentPage: 1,
      showlist: [],
      total: 1,
      pages: 1,
      SubjectList: [],
      directoryList: [],
      tagslist: [],
      questionTypeList: questionType,
      difficultyList: difficulty,
      directionList: direction,
      userInfoList: [],
      cityList: provinces(),
      smallcity: [],
      // QT: '',
      // Diff: '',
      form: {
        catalogID: null,
        pagesize: 5,
        page: 1,
        difficulty: null,
        subjectID: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null
      },
      currentid: null
    }
  },
  async created () {
    this.getBaseQuestionLists()
    // this.getSubjectList()
    const { data } = await subjects()

    this.SubjectList = data

    const res = await simple()
    console.log(res)
    this.userInfoList = res.data
    console.log(this.userInfoList)
  },
  methods: {
    async getBaseQuestionLists () {
      const { data } = await list(this.form)
      this.showlist = data.items
      this.total = data.counts
      this.form.pagesize = data.pagesize
      this.form.page = data.page
      this.pages = data.pages

      // if (data.questionType === '1') {
      //   this.QT = '单选'
      // } else if (data.questionType === '2') {
      //   this.QT = '多选'
      // } else {
      //   this.QT = '简答'
      // }

      // if (data.difficulty === '1') {
      //   this.Diff = '简单'
      // } else if (data.difficulty === '2') {
      //   this.Diff = '一般'
      // } else {
      //   this.Diff = '困难'
      // }
    },

    handleSizeChange (val) {
      this.form.pagesize = val
      this.getBaseQuestionLists(this.form)
    },
    handleCurrentChange (val) {
      this.form.page = val
      this.getBaseQuestionLists(this.form)
    },
    async changeSubject (subjectID) {
      this.form.catalogID = null
      this.form.tags = null
      if (subjectID) {
        const { data } = await directorys({ subjectID })
        this.directoryList = data
        const res = await tagslist({ subjectID })
        console.log(res)
      } else {
        this.directoryList = []
      }
    },
    cityChange (pname) {
      this.smallcity = citys(pname)
    },
    clear () {
      for (const k in this.form) {
        if (k !== 'page' && k !== 'pagesize') this.form[k] = null
      }
      this.getBaseQuestionLists()
    },
    search () {
      this.getBaseQuestionLists(this.form)
    },
    async del (id) {
      // console.log(id)
      try {
        await this.$confirm('确定要删除这条试题吗', '温馨提示', { type: 'warning' })
      } catch {
        return
      }
      await remove({ id })
      this.$message.success('删除成功')
      this.getBaseQuestionLists(this.form)
    },
    edit (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    },
    async examine (id) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '温馨提示', { type: 'info' })
      } catch {
        return
      }
      const { data } = await choiceAdd({
        id: id,
        choiceState: 1
      })
      // console.log(data)
      if (data.success === true) {
        this.$message.success('操作成功')
      }
      this.getBaseQuestionLists(this.form)
    },
    preview (row) {
      this.$refs.edit.show()
      this.currentid = row.id
      console.log(this.currentid)
    }
  }
}

</script>

<style scoped lang='less'>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .addBtn{
    height: 30px;
    width: 90px;
    font-size: 12px;
    margin-bottom: 10px;
  }
  .container{
    padding: 10px 10px;
  }
  .box-card {
    // width: 480px;
    padding: 0px 10px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-pagination {
    margin-left: 750px;
    margin-top: 10px;
  }
  .el-table {
    margin-top: 10px;
  }
</style>
